<template>
  <el-table :data="tableData">
    <el-table-column prop="title" label="标题名">
      <template #default="scope">
        <el-input v-model="scope.row.title" placeholder="请输入标题名" />
      </template>
    </el-table-column>
    <el-table-column prop="label" label="描述">
      <template #default="scope">
        <el-input v-model="scope.row.label" placeholder="请输入描述" />
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="80">
      <template #header>
        <el-button type="primary" size="small" circle @click="add" icon="plus"></el-button>
      </template>
      <template #default="scope">
        <el-button type="danger" size="small" icon="Delete" circle @click="tableData.splice(scope.$index, 1)" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);

const tableData = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

function add() {
  tableData.value.push({ title: "", label: "" });
}
</script>



<style lang="scss" scoped>
.container {
}
</style>






